這一篇我們來學習 React 的元件寫法。
以寫法來說，React 元件分成三種寫法，分別是 createClass、class component、function component。

createClass

createClass 是 React 最早創建元件的方式，通過 React.createClass 方法來創建元件，需要傳入元件的相關配置訊息，例如 render 方法。不過目前這種方法已經被淘汰，React v16 以後不再支援，因此這邊只在下面寫一個簡單的範例：

var App = React.createClass({
    render: function() {
        return (
        <div>this is a component</div>
        )
    }
})

ReactDOM.render(
    <App />
    document.getElementById('content')
)

基本上 createClass 就是調用 createClass function 來創建一個物件，裡面會有 render function 來渲染我們需要的內容。

class component

class component 就是透過 class 來創建元件，依賴於 class 的語法，要定義一個 class component，需要用 extends 去繼承React.Component，元件內必須要有 render function 來返回 JSX 語法。

// React.Component 是 React 提供的創建元件的基類
class App extends React.Component {
    render () {
        return (
            <div>
                this is a component
            </div>
        )
    }
}

PureComponent

PureComponent 相對 Component 做了一些優化，性能更好。不過使用 PureComponent 可能會導致一些問題，例如 react-router 的 link 失效等。這部分可以搭配 immutable.js 來處理。immutable.js 是 facebook 推出的一個不可變數據處理的函式庫，能夠創建不可變的資料結構，讓開發者更清楚的理解目前的資料狀態，更能優化程式處理速度。

import React from 'react'

class App extends React.PureComponent {
    //...
    render () {
        return (
            <div>
                Hello World!
            </div>
        )
    }
}

class component 調用

• 閉合寫法：指標籤內沒有包覆其他元件，不需要閉合標籤（</>）。

import React from 'react';

<App />

• 巢狀寫法:可以透過 props 下的 children 屬性或取子組件。

import React from 'react';

<App>
    <div>child component</div>
</App>

App 元件中透過 this.props.children 來定義子元件的位置

class App extends React.Component {
    render () {
        return (
            <div>
                {thie.props.children} 
            </div>
        )
    }
}

• 嵌套函數調用: 元件調用時，可以嵌套函式在裡面，透過 props 裡的 children 調用函式來渲染子元件，但函式裡面一定要是返回一個 JSX。

import React from 'react';

<App>
    {(param) => <div>{param.name}</div>}
</App>

App 元件中調用函式渲染子元件。

class App extends React.Component {
    render () {
        return (
            <div>
                {thie.props.children({name: 'leo'})} 
            </div>
        )
    }
}

function component

function component 其實就是一個 function，只是裡面要返回 JSX，這樣就會是一個 function component

const App = (props) => {
    return (
        <div>
            this is a component
        </div>
    )
}

function component 和 class component 區別

• 一個是用 class 創建元件，一個是用 function 創建。
• class component 本身有生命週期， function component 沒有生命週期，需要借助 react hook 實現。
• function component 不能訪問 this。

使用方式

• function component 的閉合寫法及巢狀寫法 和 class component 一樣。函數嵌套寫法則稍微不同，如下

import React from 'react';

<App>
    {(param) => {
        console.log(param)
        return <div>
            這是 App 的子元素，再調用 App 的時候傳入 {param.name}
        </div>
    }}
<App />

在元件中，由於是用 function，所以可以傳入參數

const App = (props) => {
    return (<div>
        { props.children({name: 'leo'}) }
    </div>)
}

嵌套的函式必須返回 JSX，本質上也是個函式元件。另外也可以透過將 props.children 賦給一個變數的方式來調用元件，但變數名稱必須大寫，因為是元件，如下

const App = (props) => {
//  Test 要大寫
    const Test = props.children;
    return (<div>
        <Test name="leo" />
    </div>)
}

小節

這一篇大概整理了 class component 及 function component 的差異及使用方式，下一篇會開始整理 state 及 props 的使用方式。